<template>
  <div class="reg-container">
    <!-- 页面中间盒子 -->
    <div class="box-reg">
      <!-- 注册表单头部 -->
      <div class="box-reg-title"></div>
      <!-- 表单内容区域 -->
      <!-- :model 绑定提交数据所存放的地方 -->
      <!-- :rules 绑定表单验证规则 -->
      <!-- ref 用来获取表单元素，建议后缀为Ref -->
      <el-form ref="regRef" :model="regForm" :rules="regFormRules">
        <!-- 用户名 -->
        <!-- prop 用来指定需要校验的数据字段名 -->
        <el-form-item prop="username">
          <!-- prefix-icon 用来设定表单中icon的显示，且在头部 -->
          <el-input v-model="regForm.username" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input v-model="regForm.password" placeholder="请输入密码" type="password" show-password>
            <!-- 使用插槽旧语法为其绑定icon的图表 -->
            <i slot="prefix" class="el-input__icon el-icon-lock"></i>
          </el-input>
        </el-form-item>
        <!-- 确认密码 -->
        <el-form-item prop="repassword">
          <el-input v-model="regForm.repassword" placeholder="请确认密码" type="password" show-password>
            <!-- 使用插槽新语法 来展现icon图标 -->
            <!-- 需要使用 template 虚拟标签 -->
            <template v-slot:prefix>
              <i class="el-input__icon el-icon-lock"></i>
            </template>
          </el-input>
        </el-form-item>
        <!-- 注册按钮 -->
        <el-form-item>
          <el-button type="primary" class="btnReg" @click="btnReg">注册</el-button>
          <!-- 使用编程式导航 ，让其点击后跳转到登录界面-->
          <el-link type="info" @click="$router.push('/login')">去登录 ？</el-link>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// import axios from 'axios'
import { regAPI } from '../api/user.js'

export default {
  name: 'Reg',
  data() {
    // 验证两次输入密码是否一致
    var samePwd = (rule, value, callback) => {
      // 判断 确认密码是否和第一次输入的一致
      // 如果不一致，则返回一个Error提示对象
      if (value !== this.regForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        // 验证成功，直接调用callback回调函数即可
        callback()
      }
    }

    return {
      // 定义收集表单数据
      regForm: {
        username: '',
        password: '',
        repassword: ''
      },
      // 定义验证规则数据对象
      regFormRules: {
        username: [
          // 定义必填项规则
          { required: true, message: '用户名是必填项', trigger: 'blur' },
          // 定义输入内容验证规则
          // pattern  用来指定正则表达式，来进行验证输入内容
          { pattern: /^[a-zA-Z0-9]{1,10}$/, message: '用户名位1-10的数字或字母', trigger: 'blur' }
        ],
        password: [
          // 定义必填项规则
          { required: true, message: '密码是必填项', trigger: 'blur' },
          { pattern: /^\S{6,15}$/, message: '密码位6-15非空字符', trigger: 'blur' }
        ],
        repassword: [
          // 定义必填项规则
          { required: true, message: '确认密码是必填项', trigger: 'blur' },
          { pattern: /^\S{6,15}$/, message: '密码位6-15非空字符', trigger: 'blur' },
          // 定义验证第一次密码是否和本次一样
          { validator: samePwd, message: '两次密码输入不一致，请重新输入！', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 注册提交事件
    btnReg() {
      // 1、在提交之前，先进行验证表单输入框中的值是否合法
      // this.$refs.regRef.validate(fn) fn 为回调函数
      // 若不合法：则不再执行以下代码
      // 若合法：则执行步骤2、axios请求代码
      // 2、执行Ajax请求代码
      // 回调函数中 参数 valid 为true时验证成功
      //                      为false时失败
      this.$refs.regRef.validate(async valid => {
        if (!valid) return
        // console.log(valid)
        // console.log('执行axios代码')
        // const { data: res } = await axios.post('http://www.liulongbin.top:3008/api/reg', this.regForm)
        const { data: res } = await regAPI(this.regForm)
        if (res.code !== 0) return this.$message.error(res.message)
        // 注册成功后进行提示
        this.$message.success(res.message)
        // 然后跳转到登录页面,使用编程式导航
        this.$router.push('/login')
        // console.log(res)
      })
      // console.log(this.regForm)
    }
  }
}
</script>

<style lang="less" scoped>
.reg-container {
  height: 100%;
  background: url('../assets/images/login_bg.jpg') no-repeat;
  background-size: cover;

  .box-reg {
    width: 400px;
    height: 334px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    padding: 0 30px;
    box-sizing: border-box;
    box-shadow: #ac9ca5 0px 5px 12px 10px;

    .box-reg-title {
      height: 60px;
      background: url('../assets/images/login_title.png') no-repeat;
      background-position: center;
    }
  }
}

.btnReg {
  width: 100%;
}

.el-link.is-underline:hover:after {
  border-bottom: 0px;
}
.el-link.el-link--info:hover {
  color: red;
}
</style>
